<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>javascript</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }
    body {
      font-size: 14px;
      padding: 20px;
    }
    ul li {
      line-height: 30px;
    }
  </style>
</head>
<body>
  <div class="aa">
    111
  </div>
  <div class="aa">
    222
  </div>
</body>
<script>
  let newUlEle = document.createElement('ul')
  document.body.appendChild(newUlEle)
  // 创建文档碎片
  let fragD = document.createDocumentFragment()
  const st = new Date().getTime()
  for (let i = 0; i < 50000; i++) {
    let li = document.createElement('li')
    li.textContent = `我是第${i}条数据`
    // 把元素对象先插入到文档碎片
    fragD.appendChild(li)
  }
  // 在ul中插入文档碎片
  newUlEle.appendChild(fragD)
  const et = new Date().getTime()
  const divTag = document.getElementsByTagName('div')
  console.log(divTag)
  const classaa = document.querySelectorAll('.aa')
  const _classaa = [...classaa]
  _classaa.push(2)
  console.log(_classaa)
</script>
</html>